<template>
  <div style="width: 100%; height: 100%">
    <div v-if="crypto">
      <!-- 顶头栏 -->
      <div class="upper">
        <div class="img">
          <img src="../../img/new-logo.png" alt="" class="logo" />
          <img src="../../img/makees.png" alt="" class="logo1" />
        </div>
      </div>
      <!-- 内容区 -->
      <div id="parent_div">
        <div id="child_div">
          <!-- 详细信息栏 -->
          <div
            class="information"
            v-for="data in orderList"
            :key="data.orderId"
          >
            <!-- 倒计时 -->
            <!-- {{ time ? time : "00:00s" }} -->
            <div class="timediv">
              <img src="../../img/time.png" alt="" class="countDown" />
              <span class="times"
                >Remaining payment time {{ time ? time : "00:00s" }}</span
              >
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 对号 -->
            <div class="Orderdiv">
              <span class="Order">Order Summary</span>
            </div>
            <!-- 商品名 -->
            <div class="Productdiv">
              <span class="Product">Product Name:</span>
              <span
                class="ProductName"
                style="color: #000000; font-weight: 700"
              >
                &nbsp;{{ data.productName }}
              </span>
            </div>
            <!-- 单号 -->
            <div class="NOdiv">
              <span class="NO">NO:</span>
              <span class="orderId">{{ data.orderId }}</span>
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 价钱 -->
            <div class="pricediv">
              <span class="price"
                >Price :<span style="color: #215dd4; font-weight: 700"
                  >{{ data.orderAmount | numFilter }}&nbsp;&nbsp;
                  {{ data.currency }}</span
                >
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 支付区 -->
      <div class="van-tabs">
        <div class="crypto">
          <div>
            <img src="../../img/crypto-5.png" alt="" class="crypto-1" />
            <span class="CryptoPay">Crypto</span>
          </div>
          <van-form
            @submit="onSubmit"
            class="form"
            :show-error="true"
            :show-error-message="true"
          >
            <span class="Currency"
              ><span class="x">*</span>&nbsp;<span>Currency</span></span
            >
            <span class="Network"
              ><span class="x">*</span>&nbsp;<span>Network</span></span
            >
            <select class="Currency1" id="Currency1" @change="getCurrency">
              <option
                v-for="(item, index) in currencys"
                :key="index"
                :value="item"
              >
                {{ item }}
              </option>
            </select>
            <meta
              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
              name="viewport"
            />
            <select
              class="Network1"
              id="Network1"
              @change="getNetwork"
              v-model="network1"
            >
              <option
                v-for="(item, index) in chainTypes"
                :key="index"
                :value="item"
              >
                {{ item }}
              </option>
            </select>
            <canvas
              id="qr"
              ref="qrcode"
              class="canvas"
              style="height: 10%; width: 10%"
            ></canvas>

            <span class="Address"
              ><span class="x">*</span>&nbsp;<span>Pay Address</span></span
            >
            <div class="bluediv">
              <input
                type="text"
                name=""
                maxlength="1"
                id="walletAddress"
                class="Address1"
                placeholder="  - -"
                :value="'  ' + walletAddress"
                disabled
              />
              <button class="btns" @click="copyToClip">
                <img src="../../img/copy.png" alt="" class="copy" />
              </button>
              <button class="Copybutton" @click="copyToClip">Copy</button>
              <div class="Donot">
                <p>
                  * The Address is valid for
                  <span style="color: #fe6868">2 hours</span> ，if you exceed
                  this time, the Order
                  <span style="color: #fe6868">will be canceled.</span>
                </p>
                <p>
                  *
                  <span style="color: #fe6868"
                    >Do not recharge any non-{{ this.currency1 }} assets</span
                  >
                  to the above address, otherwise the assets will
                  <span style="color: #fe6868">not be recovered.</span>
                </p>
                <p>
                  * Please ensure that the transfer amount is equal to the order
                  amount, otherwise the order will not be completed.
                </p>
                <p>
                  * Please do not recharge multiple times to the same address.
                </p>
                <p style="color: #fe6868">
                  * We do not support transactions initiated by smart contracts,
                  but only support ERC20, BEP20, TRC20 token transactions.
                </p>
              </div>
            </div>
          </van-form>
        </div>
      </div>
      <div>
        <button class="Previous" @click="buttonimg">Previous</button>
        <button class="Now" @click="Finish">Finish</button>
      </div>
    </div>
    <!-- 超时 -->
    <my-expired v-if="expired"></my-expired>
  </div>
</template>

<script>
import { Toast } from 'vant'
import 'vant/lib/index.css'
import QRCode from 'qrcode'
import { getOrderEntityAPI, getPingAPI } from '@/api/query'
import { copy, newDate } from '@/utils/means'
export default {
  name: 'MyCrypto',
  data () {
    return {
      card: '',
      showCard: false,
      loading: true,
      orderList: [],
      countDown: null,
      newDate: new Date().getTime(),
      time: null,
      times: null,
      timer: null,
      show: true, // 加载遮罩层
      // 货币支付
      creditIsShow: null,
      cryptoIsShow: null,
      currency1: 'USDT', // 选中的货币类型
      network1: 'BSC(BEP-20)', // 选中的交易链
      walletAddresses: [], // 信息列表
      walletAddress: '', // 显示的钱包地址
      currencys: [], // 可选择货币列表
      chainTypes: [], // 可选择的交易链
      crypto: true,
      expired: false// 超时
    }
  },
  created () {
    this.orderList = JSON.parse(localStorage.getItem('orderList')) // 从本地获取最新的orderList
    this.goback()
  },
  mounted () {
    this.getwalletAddress()
    this.useqrcode()
    // 加载完成
    this.$nextTick(() => {
      const data = {
        orderId: this.$route.query.orderId,
        cryptocompleted: 'crypto-Loading-completed = ' + newDate()
      }
      getPingAPI(data)
    })
    // 退出
    window.onbeforeunload = () => {
      const data = {
        orderId: this.$route.query.orderId,
        cryptoclose: 'crypto-close = ' + newDate()
      }
      getPingAPI(data)
    }
  },
  updated () {
    this.useqrcode()
  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后六位
      const realVal = parseFloat(value).toFixed(6)
      return realVal
    }
  },
  methods: {
    onSubmit (values) {
    },
    // 二维码生成器
    useqrcode () {
      // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、回调函数
      this.$nextTick(() => {
        QRCode.toCanvas(document.getElementById('qr'), this.walletAddress, function (error) {
          if (error) {
            console.error(error)
          }
        })
      })
    },
    goback () {
      this.cryptoIsShow = this.orderList[0].cryptoIsShow// 货币
      // this.res = res
      this.walletAddresses = this.orderList[0].walletAddress
      this.getCurrencys()
      // 获取后台时间戳
      this.countDown = this.orderList[0].expiresOn
      // 定时器方法
      this.countDowns()
      this.show = false
    },
    // 定时器
    countDowns () {
      // 过期字符串减去当前系统字符串/1000转换成总秒数
      this.times = Math.floor((this.countDown - this.newDate) / 1000)
      // 通过定时器实现动态倒计时,每隔1秒更新一次
      this.timer = setInterval(() => {
        this.times -= 1
        this.getTime()
        if (this.times <= 0) clearInterval(this.timer)
      }, 1000)
      if (this.times <= 0) clearInterval(this.timer)
    },
    getTime () {
      let m = parseInt(this.times / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(this.times % 60)
      s = s < 10 ? '0' + s : s
      this.time = m + ':' + s + 's'
    },
    // 获取选中货币类型
    getCurrency () {
      const myselect = document.getElementById('Currency1')
      const index = myselect.selectedIndex
      this.currency1 = myselect.options[index].text
      this.walletAddress = ''
      this.chainTypes = []
      // 获取当前选中货币类型可选交易链
      this.walletAddresses.forEach(item => {
        if (item.currency === this.currency1) {
          this.chainTypes.push(item.chainType)
        }
      })
      this.network1 = this.chainTypes[0]
      this.getwalletAddress()
    },
    // 获取选中交易链
    getNetwork () {
      const myselect = document.getElementById('Network1')
      const index = myselect.selectedIndex
      this.network1 = myselect.options[index].text
      this.getwalletAddress()
    },
    // 获取可选货币列表
    getCurrencys () {
      const list = []
      this.walletAddresses.forEach(item => {
        if (list.indexOf(item.currency) === -1) {
          list.push(item.currency)
        }
      })
      this.currency1 = list[0]
      this.currencys = list
      // 获取当前选中货币类型可选交易链
      this.walletAddresses.forEach(item => {
        if (item.currency === this.currency1) {
          if (item.chainType === 'BSC(BEP-20)') {
            item.chainType = 'BNB Smart Chain(BEP-20)'
          }
          this.chainTypes.push(item.chainType)
        }
      })
      if (this.currency1 === 'USDT') {
        this.network1 = 'BNB Smart Chain(BEP-20)'
      } else {
        this.network1 = this.chainTypes[0]
      }
      this.getwalletAddress()
    },
    // 获选当前选中的钱包地址
    getwalletAddress () {
      const walletAddress = this.walletAddresses.filter(item => {
        return item.currency === this.currency1 && item.chainType === this.network1
      })
      if (typeof (walletAddress[0]) !== 'undefined') {
        this.walletAddress = walletAddress[0].chainAddr
      }
    },
    // 复制地址
    copyToClip () {
      copy(this.walletAddress)
      const data = {
        orderId: this.$route.query.orderId,
        cryptoclickcopy: 'crypto-click-copy = ' + newDate()
      }
      getPingAPI(data)
      Toast.success({
        message: 'Copy Succeeded',
        className: Toast
      })
    },
    buttonimg () {
      // 返回
      const data = {
        orderId: this.$route.query.orderId,
        cryptoclickPrevious: 'crypto-click-Previous = ' + newDate()
      }
      getPingAPI(data)
      this.$router.go(-1)
    },
    Finish () {
      const datatime = {
        orderId: this.$route.query.orderId,
        cryptoclickfinish: 'crypto-click-finish = ' + newDate()
      }
      // 点击Finish
      getPingAPI(datatime)
      const data = {
        orderId: this.$route.query.orderId,
        sign: this.$route.query.sign
      }
      getOrderEntityAPI(data).then(res => {
        if (res.data.code !== 0) {
          Toast.fail({
            message: res.data.msg,
            forbidClick: true,
            className: Toast
          })
        } else {
          this.orderStatus = res.data.data.orderStatus// 整个数据
          this.merchantSuccessUrl = res.data.data.merchantSuccessUrl
          this.merchantFailUrl = res.data.data.merchantFailUrl
          if (this.orderStatus === 11) {
            Toast.loading({
              message: 'Processing',
              forbidClick: true,
              className: Toast
            })
          }
          if (this.orderStatus === 14) {
            const data = {
              orderId: this.$route.query.orderId,
              cryptoJumpSuccess: 'crypto-Jump-Success = ' + newDate()
            }
            getPingAPI(data)
            location.href = this.merchantSuccessUrl
          }
          if (this.orderStatus === 15) {
            const data = {
              orderId: this.$route.query.orderId,
              cryptoJumpFail: 'crypto-Jump-Fail = ' + newDate()
            }
            getPingAPI(data)
            location.href = this.merchantFailUrl
          }
        }
      })
    }
  },
  watch: {
    times: {
      handler (val) {
        if (val <= 0) {
          const data = {
            orderId: this.$route.query.orderId,
            cryptoJumpexpired: 'crypto-Jump-expired = ' + newDate()
          }
          getPingAPI(data)
          this.crypto = false
          this.expired = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 移动端
@media screen and (max-width: 700px) {
  /* 信息栏 */
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  .information {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .buttonimg {
    position: absolute;
    top: 0.2rem;
    width: 5%;
    background-color: #215dd400;
    border: 0px solid #000;
    color: #fff;
  }
  .timediv {
    position: relative;
    height: 1.02564rem;
  }
  .linediv {
    position: relative;
    height: 0.5rem;
  }
  .Orderdiv {
    position: relative;
    height: 1rem;
  }
  .Productdiv {
    line-height: 14px;
    margin-left: 4%;
    margin-bottom: 10px;
  }
  .NOdiv {
    margin-left: 4%;
    padding-bottom: 4%;
  }
  .pricediv {
    position: relative;
    height: 1rem;
  }
  .price {
    position: absolute;
    left: 4%;
    float: right;
    font-size: 0.38026rem;
    color: #999999;
  }
  .Product {
    // position: absolute;
    display: block;
    font-size: 0.38026rem;
    color: #999999;
    float: left;
  }
  .NO {
    font-size: 0.39026rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 4%;
    font-size: 0.42026rem;
    font-weight: 700;
  }
  .upper {
    width: 100%;
    height: 1.15385rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    width: 20%;
    height: 0.64103rem;
    margin-top: 0.25641rem;
    margin-left: 38%;
  }
  .logo1 {
    display: none;
  }
  .img {
    padding-top: 1px;
  }
  .succeed {
    background-color: red;
    z-index: 99;
  }
  .ProductName {
    font-size: 0.36026rem;
    display: inline-block;
    word-break: break-all;
    // float: right;
    font-weight: 700;
    width: 55%;
    // margin: 0 auot;
    // word-wrap: break-word;
    // word-break: normal;
    // padding-left: 40%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.36026rem;
    padding-left: 2%;
    font-weight: 700;
  }
  .orderAmount {
    position: absolute;
    top: 3%;
    left: 13%;
    float: right;
    font-size: 0.36026rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 28.3%;
    left: 21%;
    width: 4%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.27462rem;
    position: absolute;
    top: 28%;
    left: 26%;
    font-weight: 700;
  }
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
  }
  // 支付区
  .van-tabs {
    margin-top: 10px;
    position: relative;
  }
  .crypto {
    height: 11.5rem;
    width: 95%;
    display: block;
    border-radius: 0.25641rem;
    margin-top: 0.25641rem;
    margin-bottom: 2.5rem;
    margin-left: 2.5%;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .form {
    font-size: 0.35897rem;
    color: black;
    font-weight: 700;
  }
  .crypto-1 {
    position: absolute;
    top: 3%;
    left: 5%;
    width: 6%;
  }
  .CryptoPay {
    position: absolute;
    top: 3.8%;
    left: 13.5%;
    font-size: 0.42rem;
    color: black;
    font-weight: 700;
  }
  .x {
    color: red;
  }
  .Currency {
    position: absolute;
    top: 13.5%;
    left: 5%;
  }
  .Currency1 {
    position: absolute;
    padding-left: 0.12rem;
    top: 21%;
    left: 5%;
    width: 39%;
    height: 35px;
    border-radius: 10px;
    border: 1px solid #f5f6fb;
    background-color: #f5f6fb;
    font-size: 0.3rem;
  }
  ::v-deep .form .van-cell {
    overflow: visible;
  }
  ::v-deep .Currency1 .van-cell__value .van-field__body {
    width: 100%;
    height: 100%;
  }
  ::v-deep .van-tabs__wrap {
    display: none;
  }
  ::v-deep .display {
    display: block;
  }
  .Network {
    position: absolute;
    top: 13.5%;
    left: 47%;
  }
  .Network1 {
    position: absolute;
    padding-left: 0.12rem;
    top: 21%;
    left: 47%;
    width: 47%;
    height: 35px;
    font-size: 0.3rem;
    border-radius: 10px;
    border: 1px solid #f5f6fb;
    background-color: #f5f6fb;
  }
  .Address {
    position: absolute;
    top: 34%;
    left: 5%;
  }
  .Address1 {
    position: absolute;
    font-size: 0.28205rem;
    font-weight: 400;
    top: 63%;
    left: 5%;
    width: 88%;
    height: 0.8rem;
    border-radius: 0.25641rem;
    background-color: #e9e9e9;
    border: 0.02564rem solid #e9e9e9;
    // margin-bottom: 13px;
  }
  .Now {
    position: fixed;
    bottom: 2%;
    left: 5%;
    width: 90%;
    height: 0.92564rem;
    background-color: #215dd4;
    color: #ffffff;
    border: 0.02564rem solid #215dd4;
    border-radius: 0.25641rem;
    font-size: 0.30769rem;
  }
  .copy {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: -190%;
    right: 20%;
  }
  .Copybutton {
    display: none;
  }
  .btns {
    position: absolute;
    width: 8%;
    height: 6%;
    top: 77%;
    right: 6%;
    padding: 0;
    background-color: transparent;
    // 背景透明
    border: none;
    outline: none;
  }
  .canvas {
    width: 2.6rem !important;
    height: 2.6rem !important;
    position: absolute;
    top: 39%;
    left: 36%;
  }
  .Previous {
    display: none;
  }
  #pacypay_checkout {
    height: 410px;
    width: 100%;
    display: block;
  }
  .Donot {
    width: 110%;
    margin: 0 auto;
    position: absolute;
    top: 69%;
    left: -5.5%;
    font-size: 0.30769rem;
    transform: scale(0.8);
    color: #8a8f99;
    p {
      margin: 2px;
    }
  }
}
// PC端
@media screen and (min-width: 700px) {
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  /* 信息栏 */
  .information {
    width: 80%;
    position: relative;
    box-shadow: 0 0.02856rem 0.08128rem #e9e5e5;
    border-radius: 0.12821rem;
    margin: 0.12821rem auto;
  }
  .buttonimg {
    display: none;
  }
  .timediv {
    position: relative;
    height: 0.33333rem;
    float: right;
    width: 50%;
  }
  .linediv {
    display: none;
  }
  .Orderdiv {
    position: relative;
    height: 0.25rem;
  }
  .Productdiv {
    margin-left: 2%;
    margin-top: 2%;
    padding-bottom: 1%;
  }
  .NOdiv {
    margin-left: 2%;
    padding-bottom: 2%;
  }
  .pricediv {
    position: relative;
    height: 0.28rem;
    float: right;
    width: 50%;
  }
  .price {
    position: absolute;
    right: 5%;
    top: -100%;
    float: right;
    font-size: 0.11821rem;
    color: #999999;
  }
  .Product {
    position: absolute;
    display: inline-block;
    font-size: 0.11821rem;
    color: #999999;
  }
  .NO {
    font-size: 0.11821rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 2%;
    top: 34%;
    font-size: 0.13rem;
    font-weight: 700;
  }
  .upper {
    width: 100%;
    height: 0.32rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    height: 0.19rem;
    width: 6.5%;
    margin-left: 10%;
    margin-top: 0.075rem;
  }
  .logo1 {
    height: 0.15rem;
    width: 13%;
    margin-left: 0.5%;
    margin-bottom: 0.025rem;
  }
  .button {
    width: 4%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .ProductName {
    font-size: 0.10821rem;
    display: inline-block;
    width: 60%;
    font-weight: 700;
    word-wrap: break-word;
    word-break: normal;
    padding-left: 12%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.10821rem;
    font-weight: 700;
    padding-left: 2%;
  }
  .orderAmount {
    position: absolute;
    left: 4%;
    top: -97%;
    float: right;
    font-size: 0.10821rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 30%;
    right: 43%;
    width: 3%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.09821rem;
    position: absolute;
    top: 33%;
    right: 3%;
    font-weight: 700;
  }
  // 虚线
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
    display: none;
  }
  // 支付区
  .crypto {
    position: relative;
    height: 3.2rem;
    width: 100%;
    display: block;
    border-radius: 0.07692rem;
    margin-top: 0.02564rem;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .van-tabs {
    width: 80%;
    margin: 0 auto;
    position: relative;
    font-size: 2px;
  }
  .form {
    font-size: 3.5px;
    color: black;
  }
  .crypto-1 {
    position: absolute;
    top: 3%;
    left: 2%;
    width: 3%;
  }
  .CryptoPay {
    position: absolute;
    top: 4.5%;
    left: 6.5%;
    font-size: 0.13rem;
    color: black;
    font-weight: 700;
  }
  .x {
    color: red;
  }
  .Currency {
    position: absolute;
    font-size: 0.11rem;
    top: 16%;
    left: 5%;
    font-weight: 700;
  }
  .Currency1 {
    position: absolute;
    font-size: 0.09rem;
    font-weight: 700;
    top: 23%;
    left: 5%;
    width: 41%;
    height: 0.3rem;
    border-radius: 0.07692rem;
    background-color: #f5f6fb;
    border: 0.00769rem solid #f5f6fb;
    padding-left: 0.1rem;
  }
  .Network {
    position: absolute;
    font-size: 0.11rem;
    top: 16%;
    left: 52%;
    font-weight: 700;
  }
  .Network1 {
    position: absolute;
    font-size: 0.09rem;
    font-weight: 700;
    top: 23%;
    left: 52%;
    width: 41%;
    height: 0.3rem;
    border-radius: 0.07692rem;
    background-color: #f5f6fb;
    border: 0.00769rem solid #f5f6fb;
    padding-left: 0.1rem;
  }
  .Address {
    position: absolute;
    font-size: 0.11rem;
    top: 38%;
    left: 5%;
    font-weight: 700;
  }
  .bluediv {
    width: 88.5%;
    height: 1.6rem;
    background-color: #f2f7ff;
    position: absolute;
    top: 46%;
    left: 5%;
    border-radius: 0.07692rem;
  }
  .Address1 {
    position: absolute;
    top: 9%;
    left: 28%;
    font-size: 0.13rem;
    font-weight: 700;
    width: 70%;
    height: 0.23077rem;
    border-radius: 0.07692rem;
    background-color: #f2f7ff;
    border: 0rem solid #e9e9e9;
  }
  .Now {
    width: 20%;
    margin: 0.13rem 22.5% 0rem 5%;
    height: 0.3rem;
    background-color: #215dd4;
    color: #ffffff;
    border: 0.02564rem solid #215dd4;
    border-radius: 0.10256rem;
    font-size: 0.10256rem;
    font-size: 0.12rem;
  }
  .copy {
    display: none;
  }
  .Copybutton {
    position: absolute;
    width: 8%;
    top: 30%;
    left: 29.5%;
    padding: 0.04rem;
    border-radius: 0.05rem;
    border: 0.01rem solid #215dd4;
    color: #215dd4;
    background-color: #f2f7ff;
  }
  .btns {
    display: none;
  }
  .canvas {
    width: 1.3rem !important;
    height: 1.3rem !important;
    position: absolute;
    top: 51%;
    left: 8%;
    z-index: 20;
  }
  .pacypay {
    height: 205px;
    width: 85%;
    margin: 0 auto;
  }
  .Donot {
    width: 110%;
    margin: 0 auto;
    position: absolute;
    top: 48%;
    left: 18.5%;
    font-size: 0.1rem;
    transform: scale(0.8);
    color: #215dd4 !important;
    .a {
      height: 0.3rem;
      margin: 0.08rem 0.02rem;
      float: left;
    }
    p {
      margin: 1px;
    }
  }
  .Previous {
    width: 20%;
    margin: 0.13rem 5% 0rem 22.5%;
    background-color: #215dd4;
    border: 0px;
    height: 0.3rem;
    color: #fff;
    font-size: 0.12rem;
    border-radius: 0.1rem;
  }
}
</style>
